<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <div class="card-title">基础信息</div>
      <a-descriptions :column="2" class="terorder1">
        <a-descriptions-item label="客户名称">{{orderInfo.custName}}</a-descriptions-item>
        <template>
          <a-descriptions-item
            v-if="orderInfo.orderType === 'DOMESTIC_TRADE_EXPORTS'"
            label="订单类型"
          >内贸出口订单</a-descriptions-item>
          <a-descriptions-item
            v-else-if="orderInfo.orderType === 'DOMESTIC_TRADE_IMPORTS'"
            label="订单类型"
          >内贸进口订单</a-descriptions-item>
          <a-descriptions-item
            v-else-if="orderInfo.orderType === 'FOREIGN_TRADE_EXPORTS'"
            label="订单类型"
          >外贸出口订单</a-descriptions-item>
          <a-descriptions-item
            v-else-if="orderInfo.orderType === 'FOREIGN_TRADE_IMPORTS'"
            label="订单类型"
          >外贸进口订单</a-descriptions-item>
          <a-descriptions-item
            v-else-if="orderInfo.orderType === 'UNITED_TRANSPORT_EXPORTS'"
            label="订单类型"
          >联运出口订单</a-descriptions-item>
          <a-descriptions-item
            v-else-if="orderInfo.orderType === 'UNITED_TRANSPORT_IMPORTS'"
            label="订单类型"
          >联运进口订单</a-descriptions-item>
        </template>
        <a-descriptions-item label="箱型">
          <template
            v-for="(v) in containerList"
          >{{v.id === orderInfo.containerTypeId ? `${v.name}` : ``}}</template>
        </a-descriptions-item>
        <a-descriptions-item label="箱量">{{orderInfo.containerNum}}</a-descriptions-item>
        <a-descriptions-item label="货名">{{orderInfo.goodsName}}</a-descriptions-item>
        <a-descriptions-item
          label="是否开票"
        >{{orderInfo.invoiceType === '1' ? `增值税专用发票` : `增值税普通发票`}}&nbsp;&nbsp;&nbsp;&nbsp;{{orderInfo.taxRate}}%</a-descriptions-item>
        <a-descriptions-item label="结算类型">{{checkSettlementTypeName(orderInfo.settlementType)}}</a-descriptions-item>
        <a-descriptions-item label="操作员">{{orderInfo.handler}}</a-descriptions-item>
        <a-descriptions-item label="所属销售">{{orderInfo.seller}}</a-descriptions-item>
        <a-descriptions-item></a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-card :bordered="false">
        <div class="card-title">运输信息</div>
        <a-form-item
          label="运输条款"
          :label-col="{span:3}"
          :wrapper-col="{span:21}"
          prop="transportTerms"
        >
          <template>
            <a-button v-if="orderInfo.transportTerms === 'DO-DO'" type="primary" size="large">门到门</a-button>
            <a-button
              v-else-if="orderInfo.transportTerms === 'DO-CY'"
              type="primary"
              size="large"
            >门到港</a-button>
            <a-button
              v-else-if="orderInfo.transportTerms === 'CY-CY'"
              type="primary"
              size="large"
            >港到门</a-button>
            <a-button
              v-else-if="orderInfo.transportTerms === 'CY-DO'"
              type="primary"
              size="large"
            >港到港</a-button>
          </template>
        </a-form-item>
        <template>
          <!-- 门到门 -->
          <div v-if="orderInfo.transportTerms=== 'DO-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="起运港">
                    <!-- <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.startPortId ? `${v.name}` : ``}}</template>-->
                    <span>{{orderInfo.startPortName}}</span>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignor}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="发货地址">
                    <span>{{`${orderInfo.consignorProvince} ${orderInfo.consignorCity} ${orderInfo.consignorArea} | ${orderInfo.consignorAddress}`}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话">
                    <span>{{orderInfo.consignorPhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="目的港">
                    <!-- <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.endPortId ? `${v.name}` : ``}}</template>-->
                    <span>{{orderInfo.endPortName}}</span>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignee}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="收货地址">
                    <span>{{`${orderInfo.consigneeProvince} ${orderInfo.consigneeCity} ${orderInfo.consigneeArea} | ${orderInfo.consigneeAddress}`}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话">
                    <span>{{orderInfo.consigneePhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 门到港 -->
          <div v-else-if="orderInfo.transportTerms=== 'DO-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="起运港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.startPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignor}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="发货地址">
                    <span>{{`${orderInfo.consignorProvince} ${orderInfo.consignorCity} ${orderInfo.consignorArea} | ${orderInfo.consignorAddress}`}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话">
                    <span>{{orderInfo.consignorPhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="目的港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.endPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignee}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="收货人抬头">
                    <span>{{orderInfo.consigneeTitle}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话" style="margin-top:44px;">
                    <span>{{orderInfo.consigneePhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到门 -->
          <div v-else-if="orderInfo.transportTerms=== 'CY-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="起运港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.startPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignor}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="联系电话">
                    <span>{{orderInfo.consignorPhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="目的港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.endPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignee}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="收货地址">
                    <span>{{`${orderInfo.consigneeProvince} ${orderInfo.consigneeCity} ${orderInfo.consigneeArea} | ${orderInfo.consigneeAddress}`}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话">
                    <span>{{orderInfo.consigneePhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到港 -->
          <div v-else-if="orderInfo.transportTerms=== 'CY-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="起运港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.startPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignor}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="联系电话" style="margin-top:84px;">
                    <span>{{orderInfo.consignorPhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-item label="目的港">
                    <template
                      v-for="(v) in portList"
                    >{{v.id === orderInfo.endPortId ? `${v.name}` : ``}}</template>
                  </a-form-item>
                  <a-form-item label="联系人" style="margin-top:44px;">
                    <span>{{orderInfo.consignee}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="收货人抬头">
                    <span>{{orderInfo.consigneeTitle}}</span>
                  </a-form-item>
                  <a-form-item label="联系电话" style="margin-top:44px;">
                    <span>{{orderInfo.consigneePhone}}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </template>
        <a-row :gutter="[20]" style="margin-top:20px">
          <a-col :span="12">
            <a-form-item label="装货时间" :label-col="{span:6}" :wrapper-col="{span:18}">
              <span>{{orderInfo.loadingTime}}</span>
            </a-form-item>
            <a-form-item label="备注" :label-col="{span:6}" :wrapper-col="{span:18}">
              <span>{{orderInfo.sellerRemark}}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card :bordered="false">
        <div class="card-title">费用信息</div>
        <!-- 应收 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-s.png" alt />
          <span>应收</span>
        </div>
        <a-row>
          <a-col :span="12">
            <a-form-item label="应收客户（元/箱）">
              <a-row>
                <a-col :span="16">
                  <a-input v-model="orderInfo.receivableCustAmount" style="width:100%" disabled />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="orderInfo.receivableCustCurrency" disabled>
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item
              label="应收海船费用(元/箱)"
              v-if="orderInfo.orderType === 'DOMESTIC_TRADE_IMPORTS'"
            >
              <a-input v-model="orderInfo.receivableShipAmount" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="海船公司"
              v-if="orderInfo.orderType === 'DOMESTIC_TRADE_IMPORTS'"
              disabled
            >
              <a-select :value="orderInfo.receivableShipId" disabled>
                <a-select-option v-for="(v,k) in receiveList" :key="k" :value="v.id">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 应付 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-f.png" alt />
          <span>应付</span>
        </div>
        <a-row :gutter="[20]">
          <a-col :span="12">
            <a-form-item label="应付海船费用(元/箱)">
              <a-row>
                <a-col :span="16">
                  <a-input v-model="orderInfo.payableShipAmount" disabled style="width:100%" />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="orderInfo.payableShipCurrency" disabled>
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item label="始拖车费（元/箱）">
              <a-input v-model="orderInfo.payableStartTruckAmount" style="width:100%" disabled />
            </a-form-item>
            <a-form-item label="终拖车费（元/箱）">
              <a-input v-model="orderInfo.payableEndTruckAmount" style="width:100%" disabled />
            </a-form-item>
            <a-form-item label="保险费（元/箱）">
              <div
                class="clickOnlyInput"
              >{{(orderInfo.payableInsuranceAmount * orderInfo.payableInsuranceRate / 100).toFixed(2)}}</div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="海船公司">
              <a-select :value="orderInfo.payableShipId" disabled>
                <a-select-option v-for="(v,k) in payList" :key="k" :value="v.id">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="始拖车公司">
              <a-select :value="orderInfo.payableStartTruckId" disabled>
                <a-select-option v-for="(v,k) in payList" :key="k" :value="v.id">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="终拖车公司">
              <a-select :value="orderInfo.payableEndTruckId" disabled>
                <a-select-option v-for="(v,k) in payList" :key="k" :value="v.id">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
    <a-card :bordered="false">
      <div class="card-title">货物托运委托书</div>
      <viewer
        v-if="orderInfo.contractPics"
        :images="orderInfo.contractPics.split(',')"
        :options="{url: 'data-x'}"
      >
        <template v-for="(src,index) in orderInfo.contractPics.split(',')">
          <img
            style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
            :src="`${src}?x-oss-process=image/resize,h_100`"
            :data-x="src"
            :key="index"
            v-if="src"
          />
        </template>
      </viewer>
    </a-card>
  </div>
</template>
<script>
import {mixin} from '@/common/common'
import {
  // getOrderInfoById,
  getOrderShipInfoForModify,
  queryContainerTypeList,
  queryCustNameList,
  queryPortNameList
} from '@/api/salesCenter'
// import {
//   getShipOrderById
// } from '@/api/orderCenter'
import 'viewerjs/dist/viewer.css'

export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    return {
      basePath: '/salesCenter',
      routes: [
        {
          path: '/orderAudit',
          breadcrumbName: '改单审核 '
        },
        {
          path: '',
          breadcrumbName: '订单详情'
        }
      ],
      payList: [],
      orderInfo: {},
      containerList: [],
      receiveList: [],
      portList: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 16 }
    }
  },
  methods: {
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    custNameListRequest (e, type) {
      queryCustNameList(e)
        .then(res => {
          // // console.log(res.data)
          if (type === 2) {
            this.receiveList = res.data
          } else if (type === 3) {
            this.payList = res.data
          }
        })
        .catch(rs => {})
    },
    orderInfoRequest (e) {
      getOrderShipInfoForModify(e)
        .then(res => {
          let resData = res.data
          let orderType = resData.orderType
          let receivableCustAmount = resData.receivableCustAmount
          let receivableShipAmount = resData.receivableShipAmount
          let payableShipAmount = resData.payableShipAmount
          let payableStartTruckAmount = resData.payableStartTruckAmount
          let payableEndTruckAmount = resData.payableEndTruckAmount
          if (orderType === 'DOMESTIC_TRADE_IMPORTS') {
            if (receivableShipAmount || receivableShipAmount === 0) {
              resData.receivableShipAmount = resData.receivableShipAmount.toFixed(2)
            }
          }
          if (receivableCustAmount || receivableCustAmount === 0) {
            resData.receivableCustAmount = resData.receivableCustAmount.toFixed(2)
          }
          if (payableShipAmount || payableShipAmount === 0) {
            resData.payableShipAmount = resData.payableShipAmount.toFixed(2)
          }
          if (payableStartTruckAmount || payableStartTruckAmount === 0) {
            resData.payableStartTruckAmount = resData.payableStartTruckAmount.toFixed(2)
          }
          if (payableEndTruckAmount || payableEndTruckAmount === 0) {
            resData.payableEndTruckAmount = resData.payableEndTruckAmount.toFixed(2)
          }
          this.orderInfo = resData
          // // console.log(resData)
        })
        .catch(rs => {})
    }
  },
  mounted () {
    this.containerListRequest({
      status: 1
    })
    this.portListRequest({
      status: 1
    })
    this.orderInfoRequest({
      id: this.id
    })
    this.custNameListRequest(
      {
        // status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isReceivable: 1
      },
      2
    )
    this.custNameListRequest(
      {
        // status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      },
      3
    )
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin: 24px 24px 0;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 24px;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .iconTextMix {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 50px;
  }
  .border {
    padding: 24px;
    border-top: 1px solid #f0f0f0;
    border-radius: 4px;
  }
}
.ant-col-12 {
  padding-right: 50px;
}
.yewu_photo .ant-form-item {
  margin-bottom: 0;
}
.borderframe .ant-form-item {
  margin-bottom: 2px;
}
.YunSHU {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: 15px 24px 15px 0;
  background: url(../../../static/images/border-r.png) no-repeat right;
  background-size: 1px 100%;
}
</style>
<style lang="less">
.terorder1 .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
</style>
